<template>
    <div class="operation-log-container">
        <pageTitle :title="'操作日志'" />

        <div class="top-header">
            <div class="header-left">
                <span class="log-title">操作日志：</span>
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="開始日期"
                    end-placeholder="結束日期" value-format="YYYY-MM-DD" />
            </div>
            <div class="header-right">
                <el-button type="primary">
                    <el-icon>
                        <Download />
                    </el-icon>
                    <span>導出</span>
                </el-button>
            </div>
        </div>

        <!-- 操作日志表格 -->
        <div class="log-table-card">
            <el-table :data="operationLogs" style="width: 100%" v-loading="loading" :border="false" :header-cell-style="{
                borderBottom: '1px solid #ebeef5',
                textAlign: 'center',
                background: '#f8fafc',
                fontWeight: '600',
                color: '#333',
                padding: '20px'
            }" :cell-style="{
                borderBottom: '1px solid #ebeef5',
                textAlign: 'center'
            }">
                <el-table-column prop="operationTime" label="操作時間" align="center" />

                <el-table-column prop="operator" label="操作人" align="center" />

                <el-table-column prop="account" label="操作賬號" align="center" />

                <el-table-column prop="ipAddress" label="IP地址" align="center" />

                <el-table-column prop="module" label="操作模塊" align="center" />

                <el-table-column prop="record" label="操作記錄" align="center" />
            </el-table>

            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Download } from '@element-plus/icons-vue'
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 日期範圍選擇
const dateRange = ref([])

// 分頁數據
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(20)
const loading = ref(false)

// 操作日志數據
const operationLogs = ref([
    {
        id: 1,
        operationTime: '2023-05-15 09:30:25',
        operator: '張三',
        account: 'admin001',
        ipAddress: '192.168.1.100',
        module: '用戶管理',
        record: '新增用戶 ID:10086'
    },
    {
        id: 2,
        operationTime: '2023-05-15 10:15:33',
        operator: '李四',
        account: 'admin002',
        ipAddress: '192.168.1.101',
        module: '權限管理',
        record: '修改權限組:人事管理'
    },
    {
        id: 3,
        operationTime: '2023-05-14 14:20:18',
        operator: '王五',
        account: 'admin003',
        ipAddress: '192.168.1.102',
        module: '系統設置',
        record: '更新系統參數'
    },
    {
        id: 4,
        operationTime: '2023-05-14 16:45:07',
        operator: '趙六',
        account: 'admin004',
        ipAddress: '192.168.1.103',
        module: '數據備份',
        record: '執行數據庫備份'
    },
    {
        id: 5,
        operationTime: '2023-05-13 11:10:55',
        operator: '錢七',
        account: 'admin005',
        ipAddress: '192.168.1.104',
        module: '日志管理',
        record: '刪除30天前日志'
    },
    {
        id: 6,
        operationTime: '2023-05-12 15:30:42',
        operator: '張三',
        account: 'admin001',
        ipAddress: '192.168.1.100',
        module: '用戶管理',
        record: '重置用戶密碼 ID:10010'
    },
    {
        id: 7,
        operationTime: '2023-05-12 09:25:37',
        operator: '李四',
        account: 'admin002',
        ipAddress: '192.168.1.101',
        module: '權限管理',
        record: '新增權限組:財務管理'
    }
])
</script>

<style scoped lang="less">
.operation-log-container {
    padding: 20px;
    background-color: #fff;

    .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
        padding: 16px 24px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

        .header-left {
            display: flex;
            align-items: center;

            .log-title {
                font-size: 14px;
                margin-right: 10px;
                color: #333;
            }

            .el-date-picker {
                width: 350px;
            }
        }

        .header-right {
            .el-button {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }
        }
    }

    .log-table-card {
        padding: 16px;
        background-color: #fff;

        :deep(.el-table) {
            tr:hover td {
                background-color: #f5f7fa !important;
            }
        }

        .pagination-wrapper {
            margin-top: 24px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>